<template>
  <div style="height: 890px; padding-top: 50px">
    <vue2-org-tree
      :data="data"
      :horizontal="horizontal"
      :collapsable="collapsable"
      :render-content="renderContent"
      @on-expand="onExpand"
      @on-node-click="onNodeClick"
    ></vue2-org-tree>

    <div
      v-show="modelShow"
      class="ov1"
      :style="{ left: offsetwidth - 458 + 'px' }"
    >
      <el-row class="mt20">
        <el-radio-group v-model="activeName2" size="mini" class="ml10">
          <el-radio-button label="info">详细信息</el-radio-button>
          <el-radio-button label="user">网格员</el-radio-button>
          <el-radio-button label="hlxx">河流信息</el-radio-button>
          <el-radio-button label="cydw">成员单位</el-radio-button>
        </el-radio-group>
      </el-row>

      <el-container class="mt10">
        <el-main style="padding: 10px">
          <info v-if="activeName2 == 'info'" :gridid="grideData.id"></info>

          <question
            v-if="activeName2 == 'question'"
            :gridid="grideData.id"
          ></question>

          <user v-if="activeName2 == 'user'" :gridid="grideData.id"></user>

          <company
            v-if="activeName2 == 'company'"
            :gridid="grideData.id"
          ></company>

          <pwdw v-if="activeName2 == 'pwdw'" :gridid="grideData.id"></pwdw>

          <hlxx v-if="activeName2 == 'hlxx'" :gridid="grideData.id"></hlxx>

          <cydw v-if="activeName2 == 'cydw'" :gridid="grideData.id"></cydw>
        </el-main>
      </el-container>
    </div>

    <div
      class="b12"
      v-if="grideData.id"
      v-show="modelShow"
      :style="{ left: offsetwidth - 477 + 'px' }"
      @click="changeDlg"
    >
      <template>
        <i class="el-icon-arrow-left"></i>
      </template>
    </div>

    <div
      class="b13"
      v-if="grideData.id"
      v-show="!modelShow"
      :style="{ left: offsetwidth - 47 + 'px' }"
      @click="changeDlg"
    >
      <template>
        <i class="el-icon-arrow-right"></i>
      </template>
    </div>
  </div>
</template>

<script>
import Vue2OrgTree from "vue2-org-tree";
import Gride from "./components/grid_1.vue";

import question from "./components/question_1";
import user from "./components/user_1";
import company from "./components/company_1";
import info from "./components/info_1";

import pwdw from "./components/pwdw_1";
import hlxx from "./components/hlxx_1";
import cydw from "./components/cydw_1";

export default {
  name: "overview111",

  data() {
    return {
      data: {},
      horizontal: false,
      collapsable: false,
      expandAll: true,

      grideData: {},
      modelShow: false,

      activeName2: "info",

      offsetwidth: document.documentElement.clientWidth,
    };
  },

  props: {},

  components: {
    Vue2OrgTree,
    Gride,
    question,
    user,
    company,
    info,
    pwdw,
    hlxx,
    cydw,
  },

  computed: {},

  methods: {
    init() {
      this.$http({
        fun: "overviewList",
        cb: (res) => {
          console.log("overviewList");
          console.log(res);
          const result = this.$util.transData(
            res,
            "id",
            "parent_id",
            "children"
          );
          console.log("组装后的数据", result);
          const result1 = this.$util.transTreeData(result[0], 1, 4);
          this.data = result1;

          // document.getElementById('ddd3').scrollLeft=500;
        },
      });
    },

    renderContent(h, data) {
      return h(
        "div",
        {
          style: {
            display: "inline-block",
            width: "210px",
            fontSize: "14px",
            cursor: "pointer",
          },
          class: ["g" + data.type],
        },
        [
          h(
            "div",
            {
              // style : {
              // 	paddingTop : '10px',
              // 	paddingBottom : '10px',
              // },
              class: ["xx0", "title"],
            },
            data.company_name
          ),

          h(
            "div",
            {
              style: {
                paddingTop: "10px",
              },
              class: ["fl", "xx0", "content"],
            },
            [
              h(
                "div",
                {
                  class: ["fl", "xx1"],
                },
                "网格长："
              ),
              h(
                "div",
                {
                  class: ["fl", "xx2"],
                },
                data.name == undefined ? "" : data.name
              ),
            ]
          ),

          h(
            "div",
            {
              class: ["fl", "xx0", "content"],
            },
            [
              h(
                "div",
                {
                  class: ["fl", "xx1"],
                },
                "联系电话："
              ),
              h(
                "div",
                {
                  class: ["fl", "xx2"],
                },
                data.mobile == undefined ? "" : data.mobile
              ),
            ]
          ),

          h(
            "div",
            {
              class: ["fl", "xx0", "content"],
            },
            [
              h(
                "div",
                {
                  class: ["fl", "xx1"],
                },
                "排污单位："
              ),
              h(
                "div",
                {
                  class: ["fl", "xx2"],
                },
                data.qy_num + ""
              ),
            ]
          ),

          h(
            "div",
            {
              class: ["fl", "xx0", "content"],
            },
            [
              h(
                "div",
                {
                  class: ["fl", "xx1"],
                },
                "网格员："
              ),
              h(
                "div",
                {
                  class: ["fl", "xx2"],
                },
                data.wgy_num + ""
              ),
            ]
          ),

          h(
            "div",
            {
              style: {
                paddingBottom: "10px",
              },
              class: ["fl", "xx0", "content"],
            },
            [
              h(
                "div",
                {
                  class: ["fl", "xx1"],
                },
                "下级网格："
              ),
              h(
                "div",
                {
                  class: ["fl", "xx2"],
                },
                data.xjwg_num + ""
              ),
            ]
          ),
        ]
      );

      // if(data.children1.length > 0){
      // 	if(data.type == '1'){
      // 		data.children = data.children1;
      // 	}else if(data.type == '2'){
      // 		data.children = [data.children1[0]];

      // 	}
      // }

      //return data.company_name;// + (data.name ? data.name : '');
    },

    onExpand(data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },

    onNodeClick(e, data) {
      console.log(data);
      this.grideData = data;
      this.modelShow = true;
      // console.log('onNodeClick');
      // console.log(data);
      // this.$emit('showgrid', data);
      // this.current = data;

      // this.init();
    },

    // grideClose () {
    // 	this.modelShow = false
    // },

    changeDlg() {
      this.modelShow = !this.modelShow;
    },
  },

  watch: {},

  mounted() {
    this.init();
  },
};
</script>

<style>
.xx0 {
  width: 180px;
  padding-right: 15px;
  /*margin-right: 10px;*/
  padding: 3px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xx1 {
  width: 80px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xx2 {
  width: 90px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.g1 .title {
  background: rgba(107, 237, 147, 0.7);
  border-radius: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
}

.g1 .content {
  background: rgba(107, 237, 147, 0.5);
}

.g2 .title {
  background: rgba(38, 203, 186, 0.7);
  border-radius: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
}

.g2 .content {
  background: rgba(38, 203, 186, 0.5);
}

.g3 .title {
  background: rgba(175, 183, 248, 0.7);
  /*background-color: #B0B6F4;*/
  /*opacity: 0.7;*/
  border-radius: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
}

.g3 .content {
  background: rgba(175, 183, 248, 0.5);
  /*background-color: #AFB7F8;*/
  /*opacity: 0.5*/
}

.g4 .title {
  background: rgba(35, 158, 233, 0.7);
  border-radius: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
}

.g4 .content {
  background: rgba(35, 158, 233, 0.5);
}

.ov1 {
  width: 410px;
  height: 530px;
  padding-left: 10px;
  padding-right: 10px;
  color: #fff;
  /*background: rgba(19,90,108,0.9);*/
  background: rgba(8, 55, 73, 0.95);
  position: absolute;
  top: 170px;
}

.b12,
.b13 {
  position: absolute;
  top: 400px;
  width: 20px;
  height: 90px;
  background-image: url("../../assets/edge.png");
  color: #fff;
  text-align: center;
  padding-top: 72px;
  cursor: pointer;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

/*.a12 {
	left: 796px;
}

.a13 {
	left: 34px;
}*/
</style>
